<template>
  <div class="p-2">
    <div class="page_header">
      <div class="header_left">
        <Add @onRefresh="onRefresh" :isAddPower="isAddPower" />
        <templateImport @onRefresh="onRefresh" />
      </div>
      <div class="header_right">
        <el-input v-model="realName" style="width: 240px" placeholder="搜索知识库" prefix-icon="Search" @keyup.enter="init"
          clearable />
      </div>
    </div>
    <div class="page_body" v-loading="loading">
      <div class="content_box" v-for="(item, index) in tableData" :key="item.classify">
        <div class="item_title_box">
          <!-- <p class="content_title"><img src="../../assets/images/enterprise/titleBt.png" alt=""> {{ item.classifyName }}</p> -->
          <p class="content_title"> {{ item.classifyName }}</p>
        </div>
        <div class="item_center" >
          <div class="item_list" >
            <div class="item_box" v-for="(item2, index2) in item.tree" :key="item2.id">
              <div class="item_img" @mouseenter="onIsHovered(index, index2, true)"
                @mouseleave="onIsHovered(index, index2, false)">
                <div class="item_img_Aiwd" v-if="item2.aiDatasetId">
                  <span>Ai问答</span>
                  <svg-icon icon-class="Aiwd"></svg-icon>
                </div>
                <div class="item_img_Aiwd1" v-if="item2.location">
                  <span>外部链接</span>
                  <svg-icon icon-class="Aiwd1"></svg-icon>
                </div>
                <div class="topup_box" @click="onSetTop(item2)" v-if="item2.isHovered">
                  <svg-icon :icon-class="item2.sort != -1 ? 'topQy' : 'noTopQy'"></svg-icon>
                </div>
                <div v-if="item2.isHovered && item2.aiDatasetId" class="topup_box1" @click="skipAiGpt(item2)" title="跳转到AI问答">
                  <svg-icon icon-class="send2"></svg-icon>
                </div>
                <div class="cover_img_text" @click="onJumpTo(item2)">
                  <p>{{ item2.realName }}</p>
                  <span>{{ item2.remarks }}</span>
                </div>

                <img v-if="item2.coverUrl" :src="item2.coverUrl" class="img_box" style="width: 100%; height: 100%"
                  fit="cover" alt="" @click="onJumpTo(item2)" />
                <img v-else :src="cover11" class="img_box" style="width: 100%; height: 100%" fit="cover" alt=""
                  @click="onJumpTo(item2)" />

                <div :class="item2.isHovered ? 'cover_img_set_show' : 'cover_img_set_hide'" class="cover_img_set"
                  @click="onSetUp(item2)" v-if="item2.perm == 'manage'">

                  <i style="font-size: 12px" class="iconfont-el icon-setting"></i> 知识库设置
                </div>
              </div>  
            </div>
          </div>
        </div>
        <!-- <p class="opneMoer" @click="opneMoer(item,index)" v-if="item.moreShow">{{ item.openMore ? '收起' : '展开更多' }} <svg-icon :icon-class="item.openMore ? 'arrow-up': 'arrow-down'" /></p> -->
        <p class="opneMoer" @click="opneMoer(item,index)" v-if="moreShow(item,index)">{{ item.openMore ? '收起' : '展开更多' }} <svg-icon :icon-class="item.openMore ? 'arrow-up': 'arrow-down'" /></p>
      </div>
    </div>
    <!-- 设置弹窗 -->

    <Set ref="setExample" @onRefresh="onRefresh" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import loginBackground from '@/assets/images/login-background.jpg';
import { apiEnterpriseKnowledgeList, apiTreeFileSelectTreePage, apiEnterpriseFilesTreeTop, apiEnterpriseFilesTreeAddViews } from '@/api/enterpriseDoc/enterpriseListApi';
import {aiqaWikiAppsGetAuthorizedByDataSetId} from '@/api/chatgpt/chatgptApis'
import { ElMessage } from 'element-plus';
import Add from './component/enterpriseList/add.vue';
import Set from './component/enterpriseList/set.vue';
import TemplateImport from './component/enterpriseList/template-import.vue';
const realName = ref(''); // 搜索字段
const tableData: any = ref([]); // 列表数据
const setExample = ref(); // 设置弹窗实例
const loading = ref(false); // 加载状态
const router = useRouter();
const isHovered = ref(false);
const isAddPower = ref<boolean>(false);
import { useEnterpriseDocStore } from '@/store/modules/enterpriseDoc';
import cover1 from '../../assets/images/enterprise/cover1.png';
import cover2 from '../../assets/images/enterprise/cover2.png';
import cover3 from '../../assets/images/enterprise/cover3.png';
import cover4 from '../../assets/images/enterprise/cover4.png';
import cover5 from '../../assets/images/enterprise/cover5.png';
import cover6 from '../../assets/images/enterprise/cover6.png';
import cover7 from '../../assets/images/enterprise/cover7.png';
import cover8 from '../../assets/images/enterprise/cover8.png';
import cover9 from '../../assets/images/enterprise/cover9.png';
import cover10 from '../../assets/images/enterprise/cover10.png';
import cover11 from '../../assets/images/enterprise/cover11.png';
import cover12 from '../../assets/images/enterprise/cover12.png';
const imgList: any = ref([
  { name: 'cover1.png', url: cover1 },
  { name: 'cover2.png', url: cover2 },
  { name: 'cover3.png', url: cover3 },
  { name: 'cover4.png', url: cover4 },
  { name: 'cover5.png', url: cover5 },
  { name: 'cover6.png', url: cover6 },
  { name: 'cover7.png', url: cover7 },
  { name: 'cover8.png', url: cover8 },
  { name: 'cover9.png', url: cover9 },
  { name: 'cover10.png', url: cover10 },
  { name: 'cover11.png', url: cover11 },
  { name: 'cover12.png', url: cover12 }
]);
const docStore = useEnterpriseDocStore();
onMounted(() => {
  init();
});
const imgSrc = (name: string) => {
  let url: string;
  let res = imgList.value.map((item) => {
    if (item.name == name) {
      url = item.url;
    }
  });
  return url;
};
const onIsHovered = (index: number, index2: number, isHovered: boolean) => {
  if (isHovered) {
    tableData.value[index].tree[index2].isHovered = true;
  } else {
    tableData.value[index].tree[index2].isHovered = false;
  }
};
// 获取知识库数据
const init = async () => {
  loading.value = true;
  let res: any = await apiEnterpriseKnowledgeList({ realName: realName.value });
  loading.value = false;
  if (res.code === 200) {
    tableData.value = res.data.heads.map(item=>{
      item.openMore = true;
      item.moreShow = true;
      return item;
    });
    if (res.data.perm == 'manage') {
      isAddPower.value = true;
    } else {
      isAddPower.value = false;
    }
  }
};

//导入
const exportClick = () => { };
// 跳转到企业文档
const onJumpTo = async (item: any) => {
  if(item.location){
    window.open(item.location)
    return;
  }
  docStore.updateRow(item);
  router.push(`/newUi/enterprises/enterpriseDoc`);
  await apiEnterpriseFilesTreeAddViews({ id: item.id });
};
// 打开设置弹窗
const onSetUp = async (item2: any) => {
  setExample.value.addClick(item2);
};
// 刷新页面
const onRefresh = () => {
  init();
};
// 设置置顶
const onSetTop = async (item: any) => {
  let parmas = {
    ids: [item.id],
    top: item.sort === -1 ? false : true
  };
  let res = await apiEnterpriseFilesTreeTop(parmas);
  if (res.code === 200) {
    if (item.sort === -1) {
      ElMessage.success('取消置顶成功');
    } else {
      ElMessage.success('置顶成功');
    }
    init();
  }
};
//跳转ai助手
const skipAiGpt = (item:any) =>{
  aiqaWikiAppsGetAuthorizedByDataSetId({dataSetId:item.aiDatasetId}).then((res:any)=>{
    if(res.data.appKey){
      router.push(`/aiQA/chatGptIndex?aiDatasetId=${item.aiDatasetId}`)
    }else{
      ElMessage.warning('该知识库未配置知识库应用')
    }
  })
// router.push(`/newUi/enterprises/aiGpt?id=${item.id}`)
}
const opneMoer = (item:any,index:any) =>{
  let dom:any = document.getElementsByClassName('item_list')[index]
  const fullHeight = dom.getBoundingClientRect().height;
  if(fullHeight < 444){
    ElMessage.success('已加载全部数据');
    item.moreShow = false;
    return;
  }
  item.openMore = !item.openMore;
  let dom1:any = document.getElementsByClassName('item_center')[index]
  if(item.openMore){
    dom1.style.height = fullHeight + 'px'
  }else{
    dom1.style.height = 444 + 'px'
  }
}
const moreShow = (item:any,index:any) =>{
  let res = false
    let dom:any = document.getElementsByClassName('item_list')[index]
    if(!dom){
      return
    }
    const fullHeight = dom.getBoundingClientRect().height;
    if(fullHeight < 444){
      res = false;
    }else{
      res = true;
    }
  return res
}
</script>
<style scoped lang="scss">
.p-2 {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.page_header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 20px;
  .header_left {
    display: flex;
    gap: 10px;
    flex: 1;
  }

  .header_right {
    :deep(.el-input__wrapper) {
      // background-color: #f5f6f7;
    }
  }
}

.page_body {
  flex: 1;
  overflow: auto;
  margin-top: 15px;
}

.content_box {
  margin-bottom: 30px;
  .item_title_box{
    border-bottom: 1px solid #e5e5e5;
    // padding-bottom: 20px;
    // .content_title {
    //   font-size: 16px;
    //   background-color: rgb(254 231 205);
    //   color: rgb(164 73 4);
    //   padding: 8px 18px;
    //   border-radius: 5px;
    //   display: inline-flex;
    // }
    // img{
    //     width: 18px;
    //     height: 18px;
    //     margin-right: 8px;
    // }
    .content_title{
      background: url('../../assets/images/enterprise/titleBj.png') no-repeat;
      height: 45px;
      width: 300px;
      background-position: center -6px;
      background-size: cover;
      text-align: center;
      line-height: 38px;
      margin-left: 15px;
    }
  }
  
  .item_center{
    // height: 444px;
    height: auto;
    overflow: hidden;
    transition: height 0.5s ease-out;
    .item_list {
      display: flex;
      flex-wrap: wrap;
      gap: 30px 50px;
      margin: 0 5px;
      padding: 20px 30px;
      padding-bottom: 0;
    }
  }

  .item_list1{
    max-height: 2000px;
  }
  .opneMoer{
    margin-top: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #409eff;
    }
  .item_box {
    .item_img {
      width: 140px;
      height: 196px;
      position: relative;
      transition: all 0.3s ease-out;
      border-radius: 8px;
      transform-origin: center center;
      box-shadow: 0 2px 4px rgba(31, 35, 41, 0.1);

      &:hover {
        padding: 0px;
        transform: scale(1.01);
      }

      .item_img_Aiwd {
        position: absolute;
        top: 0;
        background-color: #336df4;
        display: flex;
        height: 15px;
        width: 50px;
        border-top-left-radius: 8px;
        border-bottom-right-radius: 8px;

        span {
          font-size: 10px;
          color: white;
          font-weight: 500;
          padding-left: 10px;
          z-index: 10;
        }

        svg {
          position: absolute;
          font-size: 31px;
          top: -8px;
          left: 20px;
        }
      }
      .item_img_Aiwd1 {
        position: absolute;
        top: 0;
        background-color: #67c23a;
        display: flex;
        height: 15px;
        width: 50px;
        border-top-left-radius: 8px;
        border-bottom-right-radius: 8px;

        span {
          font-size: 10px;
          color: white;
          font-weight: 500;
          padding-left: 10px;
          z-index: 10;
        }

        svg {
          position: absolute;
          font-size: 31px;
          top: -8px;
          left: 30px;
        }
      }

      .topup_box {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 5px;
        right: 5px;
        position: absolute;
        cursor: pointer;
        z-index: 999;
      }
      .topup_box1 {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 32px;
        right: 5px;
        position: absolute;
        cursor: pointer;
        z-index: 999;
        color: #fff;
      }

      .cover_img_text {
        position: absolute;
        cursor: pointer;
        top: 1px;
        padding: 25px;

        p {
          margin: 0;
          color: white;
          font-size: 16px;
          line-height: 20px;
          cursor: pointer;
          padding-bottom: 10px;
        }

        span {
          color: white;
          font-size: 12px;
        }
      }

      .cover_img_set {
        transition: all 0.3s ease-out;
        position: absolute;
        bottom: 1px;
        font-size: 12px;
        font-weight: 600;
        color: rgb(255, 255, 255);
        background-color: rgba(0, 0, 0, 0.55);
        border-radius: 0 0 8px 8px;
        text-align: center;
        width: 100%;
        height: 36px;
        line-height: 36px;
        cursor: pointer;
      }

      .cover_img_set_show {
        opacity: 1;
      }

      .cover_img_set_hide {
        opacity: 0;
      }

      img {
        border-radius: 8px;
        cursor: pointer;
      }
    }
  }
}
</style>
